<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/game.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.alerts.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal-1.3.5.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.alerts.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/niftyplayer.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<title>Acquire</title>

</head>
<body>
	<div id="dataHolder" style='display:none'></div>
	<div id="infoCard"></div>
	<div id="credits"></div>
	<div id="userHelp"></div>
	<div id="video"></div>
	<div id="debugging" style='display:none'></div>
	<div id="container">
		<div id="topPanel">
			<div id="board">
				<table cellspacing=0>
				  <thead>
					<tr>
					  <td id="currentTile"></td>
					  <td>1</td>
					  <td>2</td>
					  <td>3</td>
					  <td>4</td>
					  <td>5</td>
					  <td>6</td>
					  <td>7</td>
					  <td>8</td>
					  <td>9</td>
					  <td>10</td>
					  <td>11</td>
					  <td>12</td>
					</tr>
				  </thead>
				  <tbody>
					<tr>
					  <td>A</td>
					  <td class="tile" id="A1"></td>
					  <td class="tile" id="A2"></td>
					  <td class="tile" id="A3"></td>
					  <td class="tile" id="A4"></td>
					  <td class="tile" id="A5"></td>
					  <td class="tile" id="A6"></td>
					  <td class="tile" id="A7"></td>
					  <td class="tile" id="A8"></td>
					  <td class="tile" id="A9"></td>
					  <td class="tile" id="A10"></td>
					  <td class="tile" id="A11"></td>
					  <td class="tile" id="A12"></td>
					</tr>
					<tr>
					  <td>B</td>
					  <td class="tile" id="B1"></td>
					  <td class="tile" id="B2"></td>
					  <td class="tile" id="B3"></td>
					  <td class="tile" id="B4"></td>
					  <td class="tile" id="B5"></td>
					  <td class="tile" id="B6"></td>
					  <td class="tile" id="B7"></td>
					  <td class="tile" id="B8"></td>
					  <td class="tile" id="B9"></td>
					  <td class="tile" id="B10"></td>
					  <td class="tile" id="B11"></td>
					  <td class="tile" id="B12"></td>
					</tr>
					<tr>
					  <td>C</td>
					  <td class="tile" id="C1"></td>
					  <td class="tile" id="C2"></td>
					  <td class="tile" id="C3"></td>
					  <td class="tile" id="C4"></td>
					  <td class="tile" id="C5"></td>
					  <td class="tile" id="C6"></td>
					  <td class="tile" id="C7"></td>
					  <td class="tile" id="C8"></td>
					  <td class="tile" id="C9"></td>
					  <td class="tile" id="C10"></td>
					  <td class="tile" id="C11"></td>
					  <td class="tile" id="C12"></td>
					</tr>
					<tr>
					  <td>D</td>
					  <td class="tile" id="D1"></td>
					  <td class="tile" id="D2"></td>
					  <td class="tile" id="D3"></td>
					  <td class="tile" id="D4"></td>
					  <td class="tile" id="D5"></td>
					  <td class="tile" id="D6"></td>
					  <td class="tile" id="D7"></td>
					  <td class="tile" id="D8"></td>
					  <td class="tile" id="D9"></td>
					  <td class="tile" id="D10"></td>
					  <td class="tile" id="D11"></td>
					  <td class="tile" id="D12"></td>
					</tr>
					<tr>
					  <td>E</td>
					  <td class="tile" id="E1"></td>
					  <td class="tile" id="E2"></td>
					  <td class="tile" id="E3"></td>
					  <td class="tile" id="E4"></td>
					  <td class="tile" id="E5"></td>
					  <td class="tile" id="E6"></td>
					  <td class="tile" id="E7"></td>
					  <td class="tile" id="E8"></td>
					  <td class="tile" id="E9"></td>
					  <td class="tile" id="E10"></td>
					  <td class="tile" id="E11"></td>
					  <td class="tile" id="E12"></td>
					</tr>
					<tr>
					  <td>F</td>
					  <td class="tile" id="F1"></td>
					  <td class="tile" id="F2"></td>
					  <td class="tile" id="F3"></td>
					  <td class="tile" id="F4"></td>
					  <td class="tile" id="F5"></td>
					  <td class="tile" id="F6"></td>
					  <td class="tile" id="F7"></td>
					  <td class="tile" id="F8"></td>
					  <td class="tile" id="F9"></td>
					  <td class="tile" id="F10"></td>
					  <td class="tile" id="F11"></td>
					  <td class="tile" id="F12"></td>
					</tr>
					<tr>
					  <td>G</td>
					  <td class="tile" id="G1"></td>
					  <td class="tile" id="G2"></td>
					  <td class="tile" id="G3"></td>
					  <td class="tile" id="G4"></td>
					  <td class="tile" id="G5"></td>
					  <td class="tile" id="G6"></td>
					  <td class="tile" id="G7"></td>
					  <td class="tile" id="G8"></td>
					  <td class="tile" id="G9"></td>
					  <td class="tile" id="G10"></td>
					  <td class="tile" id="G11"></td>
					  <td class="tile" id="G12"></td>
					</tr>
					<tr>
					  <td>H</td>
					  <td class="tile" id="H1"></td>
					  <td class="tile" id="H2"></td>
					  <td class="tile" id="H3"></td>
					  <td class="tile" id="H4"></td>
					  <td class="tile" id="H5"></td>
					  <td class="tile" id="H6"></td>
					  <td class="tile" id="H7"></td>
					  <td class="tile" id="H8"></td>
					  <td class="tile" id="H9"></td>
					  <td class="tile" id="H10"></td>
					  <td class="tile" id="H11"></td>
					  <td class="tile" id="H12"></td>
					</tr>
					<tr>
					  <td>I</td>
					  <td class="tile" id="I1"></td>
					  <td class="tile" id="I2"></td>
					  <td class="tile" id="I3"></td>
					  <td class="tile" id="I4"></td>
					  <td class="tile" id="I5"></td>
					  <td class="tile" id="I6"></td>
					  <td class="tile" id="I7"></td>
					  <td class="tile" id="I8"></td>
					  <td class="tile" id="I9"></td>
					  <td class="tile" id="I10"></td>
					  <td class="tile" id="I11"></td>
					  <td class="tile" id="I12"></td>
					</tr>
				  </tbody>
				</table>
			</div>
			<div id="upperRightPanel">
				<div id="userOptions">
					
					<div id="upperRightPanelTop">
						<h3> Acquire </h3> 
						<a id="loadInfoCard" href="#" onclick="loadInfoCard()"><img src="img/info.png" /></a>
						<a id="loadInfoCard" href="#" onclick="loadHelp()"><img src="img/help.png" /></a>
						<a id="loadInfoCard" href="#" onclick="loadCredits()"><img src="img/credits.png" /></a>
					</div>
					
					<div id="companiesInterface">
						<div class='companySlot limited' id="Sackson">
							<img src='img/sackson.png'/>
							<div id="sacksonSlot"></div>
						</div>
						<div class='companySlot limited' id="Zeta">
							<img src='img/zeta.png'/>
							<div id="zetaSlot"></div>
						</div>
						<div class='companySlot limited' id="Hydra">
							<img src='img/hydra.png' />
							<div id="hydraSlot"></div>
						</div> 
						<div class='companySlot limited' id="Fusion">
							<img src='img/fusion.png'/>
							<div id="fusionSlot"></div>
						</div>
						<div class='companySlot limited' id="America">
							<img src='img/america.png'/>
							<div id="americaSlot"></div>
						</div>
						<div class='companySlot limited' id="Phoenix">
							<img src='img/phoenix.png'/>
							<div id="phoenixSlot"></div>
						</div>
						<div class='companySlot limited' id="Quantum">
							<img src='img/quantum.png'/>
							<div id="quantumSlot"></div>
						</div>
					</div>
					<div id="selectNewCompany" class="selectSection hidden">
						Which company do you want to establish?
						
						<br />
						<a href="#" class='videoLink' onclick='loadVideo("CHSmkLX_NMg")'>Confused? Click Here (Video)</a>
					</div>
					<div id="selectSoldCompany" class="selectSection hidden">
						The highlighted companies are of the same size. <br/>
						Select the order of the companies to be sold.
						
						<br />
						<a href="#" class='videoLink' onclick='loadVideo("36o-_h2mcw4")'>Confused? Click Here (Video)</a>
					</div>
					<div id="selectStocksAmount" class="selectSection hidden">
						<div class='selectText'>How many stocks would you like to buy?</div>
						<div class='stockAmount'>0</div> 
						<div class='stockAmount'>1</div> 
						<div class='stockAmount'>2</div> 
						<div class='stockAmount'>3</div> 
						
						
						<br />
						<a href="#" class='videoLink' onclick='loadVideo("CHSmkLX_NMg")'>Confused? Click Here (Video)</a>
					</div>
					<div id="selectStocks" class="selectSection hidden">
						<div class='selectText'>Click on the companies you want.</div>
						
						<br />
						<a href="#" class='videoLink' onclick='loadVideo("CHSmkLX_NMg")'>Confused? Click Here (Video)</a>
					</div>
					<div id="soldCompanyOptions" class="selectSection hidden">
						<div class='selectText'>The highlighted company is being sold. Select what do with your shares:</div>
						<div id="soldCompanyFormWrapper">
							<form id="soldCompanyForm" action="#" method="post">
								<p class='formText'>
									<label>Shares to sell:<br/></label>
								    <input type="text" id="toSell" name="toSell"/>
								</p>
								<p class='formText'>
									<label>Shares to convert:<br/></label>
									<input type="text" id="toConvert" name="toConvert" />
								</p>
							</form>
							<p class='formText' id="loginButton"><a href="#" onclick="$('#soldCompanyForm').submit()">Confirm</a></p>
						</div>
						
						<br />
						<a href="#" class='videoLink' onclick='loadVideo("LLWRa8dTWzY")'>Confused? Click Here (Video)</a>
										
					</div>
					<div id="pickTileOption" class="selectSection hidden">
						<div class='selectText'>Pick a tile to place on board.</div>
						<div class='selectText'>You can either click on it or on it's location in the board</div>
						
						<br />
						<a href='#' class='videoLink' onclick="loadVideo('CHSmkLX_NMg')">Confused? Click Here (Video)</a>
						
						<div id="endGamePrematurely" class='selectText'>
							<a href="#" onclick="manageEndGamePrematurely()">End game now</a> <br />
						</div>
						
					</div>
					<div id="endOfGame" class="selectSection hidden">
						<div class='selectText'> This game has ended.</div>
						<div id='newRankingWrapper' class='selectText hidden'> Your new ranking is:
							<span id='newRanking'></span>
						</div>
						<div id="scoreTable">
							
						</div>
						
						<div class='selectText'>
							<a href="http://delta-tomcat-vm.cs.tau.ac.il:40767//lobby.html"> Back to lobby</a>
						</div>
					</div>
					<div id="notInTurn" class='selectSection'>
						<a href='#' class='videoLink' onclick="loadVideo('QH1Ox81zO_0')">Confused? Click Here (Video)</a>
					</div>
				</div>
				<div id="playerList">
				</div>
			</div>
		</div>
		<div id="bottomPanel">
			<div id="extra">
				<div id="playerTiles">
					<span class="infoText"> Hand Tiles: </span>
					<span class="playerTile"> </span>
					<span class="playerTile"> </span>
					<span class="playerTile"> </span>
					<span class="playerTile"> </span>
					<span class="playerTile"> </span>
					<span class="playerTile"> </span>
				</div>
				<div id="playerStocks">
					<span class='infoText'> Stocks: </span>
					<div class='playerStock'>
						<img src='img/sackson.png'/>
						<div id="sacksonStocks"> 0 </div>
					</div>
					<div class='playerStock'>
						<img src='img/zeta.png'/>
						<div id="zetaStocks"> 0 </div>
					</div>
					<div class='playerStock'>
						<img src='img/hydra.png'/>
						<div id="hydraStocks"> 0 </div>
					</div>
					<div class='playerStock'>
						<img src='img/fusion.png'/>
						<div id="fusionStocks"> 0 </div>
					</div>
					<div class='playerStock'>
						<img src='img/america.png'/>
						<div id="americaStocks"> 0 </div>
					</div>
					<div class='playerStock'>
						<img src='img/phoenix.png'/>
						<div id="phoenixStocks"> 0 </div>
					</div>
					<div class='playerStock'>
						<img src='img/quantum.png'/>
						<div id="quantumStocks"> 0 </div>
					</div>
				</div>
				<div id="playerMoneyWrap">
					<span class="infoText">Money: </span><span id="playerMoney">  </span>
				</div>
			</div>
			<div id="bottomRightPanel">
				<div id="playerLog">
	
				</div>
				<div id="chatTextBox">
					<form id="chatForm" action="#" method="post">
					    <input type="text" id="chatMessageInput" name="chatMessageInput" />
					    <img src='img/post.png' id="postWrapper" onclick="$('#chatForm').submit()">
					</form>			
				</div>			
			</div>
		</div>
	</div>

	<object id="soundPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="0" height="0" >
		<param name=movie value="flash/niftyplayer.swf" />
		<embed src="flash/niftyplayer.swf" width="0" height="0" name="soundPlayer" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer />
	</object>
	
</body>
</html>